<template>
  <div class="ui-panel lesson-student-dynamic">
    <view class="panel-header student-dynamic--header">
      <text class="panel-title">学员动态</text>
    </view>
    <div class="panel-content student-dynamic" ref="containerParent">
      <div class="student-dynamic--container" ref="container" :animation="animationData">
        <div class="student-dynamic-item" v-for="(item, index) in list" :key="index">
          <div class="student-dynamic-item-img">
            <image :src="item.avatar" :alt="item.phone" />
          </div>
          <div class="student-dynamic-item--content">
            <div class="student-dynamic-item--header">
              <span class="student-dynamic-item--header-name">{{item.phone}}</span>
              <span class="student-dynamic-item--header-status">{{item.operateType | isStudy}}</span>
            </div>
            <div class="student-dynamic-item--main">
              <div class="student-dynamic-item--desc van-ellipsis">{{ item.lessonNmae }}</div>
              <div class="student-dynamic-item--time">{{ item.operateTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStudentBehavior } from "api/order/lession.js";

export default {
  name: "LessonRecommend",
  components: {},
  props: {
    lessonId: [String, Number]
  },
  data() {
    return {
      list: [],

      timer: null,
      scrollHeight: 0, //向上滚动距离
      height: 500, //.lis高度（滚动框高度）
      animationData: {} //动画对象
    };
  },
  filters: {
    isStudy(type) {
      if (type == 1) {
        return "开始学习";
      } else if (type == 2) {
        return "结束学习";
      }
    }
  },
  created() {
    this.loadRecommended();
  },
  mounted() {},
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    handleClickGotoLession() {
      this.$router.push(`/lession`);
    },
    handleClickGotoLessionDetail(lessonId) {
      this.$router.push({
        path: `/lession/detail`,
        query: {
          id: `${lessonId}`,
          sid: this.$route.query.sid
        }
      });
    },
    // 重新加载一批数据
    handleClickReload() {
      // 处理当前页 如果小于最大页数则增加 否则变成第一页
      if (this.page.currentPage >= this.page.totalPage) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage++;
      }
      this.loadRecommended();
    },
    // 加载推荐的课程
    loadRecommended() {
      var params = {
        lessonId: this.lessonId
      };
      var self = this;
      getStudentBehavior(params).then(({ respCode, respMsg, result }) => {
        result = [
          {
            id: 2437,
            lessonId: 286,
            operateType: 2,
            operateUserId: 111111528,
            operateTime: 1586498236000,
            subLessonId: 686,
            phone: "131****8990",
            avatar:
              "http://www.yjzgo.com/group1/M00/1F/35/Cp8-6F6NJzmAWcCAAAUcqQQSiOc970.png",
            lessonNmae: "测试3"
          },
          {
            id: 2431,
            lessonId: 286,
            operateType: 2,
            operateUserId: 111111527,
            operateTime: 1586496979000,
            subLessonId: 686,
            phone: "136****5483",
            avatar: null,
            lessonNmae: "测试3"
          }
        ];
        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        self.list = result;

        this.$nextTick(() => {
          this.prizeScroll();
        });
      });
    },
    getHeight(Class) {
      let query = uni.createSelectorQuery().in(this);
      query
        .selectAll(Class)
        .boundingClientRect(data => {
          this.height = data[0].height;
        })
        .exec();
    },
    prizeScroll() {
      let speed = 50;
      let animation = uni.createAnimation({
        duration: this.getHeight(".student-dynamic--container") / speed,
        timingFunction: "linear",
        delay: 0
      });
      this.animation = animation;
      setInterval(() => {
        if (this.scrollHeight >= this.height) {
          animation.translateY(0).step();
          this.scrollHeight = 0;
          this.animationData = animation.export();
        } else {
          this.scrollHeight = this.scrollHeight + 1;
          animation.translateY(-this.scrollHeight).step();
          this.animationData = animation.export();
        }
      }, speed);
    }
  }
};
</script>
<style lang="scss">
// .lesson-student-dynamic {
//   padding: 0 30px 0.533rem 30px;
//   width: 100%;
//   background-color: #fff;
//   margin-top: 16px;
//   box-sizing: border-box;
//   .student-dynamic--header {
//     color: #2c2c35;
//     font-size: 34px;
//     padding: 32px 0;
//   }
//   .student-dynamic-swipe {
//     height: 484px;
//   }

// }
.student-dynamic {
  width: 690rpx;
  max-height: 484rpx;
  margin: 0 auto;
  overflow: hidden;
  .student-dynamic-item {
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .animate-up {
    transition: all 4s ease-in-out;
    transform: translateY(-484rpx);
  }
}
.student-dynamic {
  .student-dynamic-item {
    padding-bottom: 40rpx;
    width: 690rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-family: MicrosoftYaHei;
    font-size: 28rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1;
    height: 121rpx;
    .student-dynamic-item-img {
      flex: 0 0 81rpx;
      width: 81rpx;
      height: 81rpx;
      image {
        width: 81rpx;
        height: 81rpx;
        border-radius: 50%;
      }
    }
    .student-dynamic-item--content {
      flex: 1;
      padding: 0 0 0 17rpx;
      .student-dynamic-item--header {
        letter-spacing: 0rpx;

        .student-dynamic-item--header-name {
          color: #49af4f;
        }
        .student-dynamic-item--header-status {
          margin-left: 40rpx;
          color: #999999;
        }
      }
    }
    .student-dynamic-item--main {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      color: #333333;
      margin-top: 15rpx;
      .student-dynamic-item--desc {
        flex: 1;
      }
      .student-dynamic-item--time {
        flex: 0 0 200rpx;
        text-align: right;
      }
    }
  }
}
</style>
